html body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

p{
	margin:2px;
}
.CheckLayers{
	background: #00bfff;
    display: block;
    color: #fff;
    font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
    font-weight: 400;
    position: absolute;
    padding-right: 2.5em;
    cursor: default;
/*     height: 95px; */
    width:80px
    z-index:5;
    left:10%;
    top:20%;
/*     opacity:0.5; */
    -webkit-appearance: none;
	-webkit-box-shadow: 3px 3px 3px; 
    -moz-box-shadow: 3px 3px 3px; 
    -box-shadow: 3px 3px 3px;
    border-radius: 5px;
    padding-top:10px;
    padding-bottom:10px;
}
.CheckButon{
	margin-top:2px;
	width:50px;
	font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
    font-weight: 400;
}
.BaseDiv {
	display: -webkit-flex;
	display: flex;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.map {
	width: 100%;
	height: 100%;
}

.SearchBox {
	z-index:5;
	background-color: white;
	border-radius: 10px;
	margin: 5%;
	position: absolute;
	width: 90%;
	height: 10%;
	display: -webkit-flex;
	display: flex;
	border-color: white;
	/*				justify-content: center;
				align-items: center;*/
}

.SearchInput {
	
	width: 65%;
	height: 100%;
	margin: 0px;
	border: 0px;
	padding: 0px;
	/*border-style: hidden;*/
	margin-left: 5px;
	border-radius: 10px;
	font-size:18px;
	
}
 #Marker{
    position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	width: 100px;
	height:60px;
}
.ol-popup {
	position: absolute;
	background-color: white	;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	width: 160px;
	height:80px;
}
.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}
.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: "✖";
}

.headimg {
	border-radius: 10px;
	width: 10%;
	height: 85%;
/* 	margin: 25px; */
	border: 10px;
	border-color:#fff;
	border-style: hidden;
	outline: none;
	outline-style: hidden;
	margin: 8px;
/* 	padding: 10px; */
/* 	max-height:80px; */
/* 	max-width:80px; */
}
.LegendDiv{
	width:60px;
	z-index:5;
	position:absolute;
	top:73%;
	left:75%;
	background-color:white;
/* 	opacity:0.5; */
	font-color: #fff;
    font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
    border-radius: 5px;
/*     border-style: solid; */
    -webkit-box-shadow: 5px 5px 5px #fff; 
    -moz-box-shadow: 5px 5px 5px #fff; 
    -box-shadow: 5px 5px 5px #fff; 
/*     box-shadow: #0ff; */
/* 	outline-color:white; */
}
.SearchButton {
	border-color: deepskyblue;
	width: 25%;
	margin: 0px;
	border: 0px;
	padding: 0px;
	background-color: deepskyblue;
	color: white;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-webkit-appearance: none;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.ZoomArea {
	z-index:5;
	width: 10%;
	height: 10%;
	
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	position: absolute;
}
.ol-zoom{
	top: 45%;
	left: 85%;
}
.ol-control button {
	background-color: deepskyblue;
}
.ZoomButton {
	background-color: deepskyblue;
	width: 30px;
	height: 39px;
	border: 1px;
	border-color: deepskyblue;
	border-style: solid;
	color: white;
}
/*			input:focus {
				color: #ed1941;
				border: 0px solid #2468a2;
				background-color: #afdfe4;
				border-color: white;
				margin: 0px;
			}*/
.GoButton {
	z-index:5;
	width: 10%;
	top: 75%;
	left: 10%;
	flex-direction: column;
	position: absolute;
	padding:0px;
	margin: 0px;
	width: 90px;
	height: 90px;
	background: red;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	background-color: deepskyblue;
	font-family: "微软雅黑";
/* 	font-style: italic; */
	color: white;
	text-align: center;
	text-align: -webkit-center;
	line-height: 85px;
	font-size: 32px;
	-webkit-appearance: none;
	border-style: hidden;
	-webkit-box-shadow: 5px 5px 5px #fff; 
    -moz-box-shadow: 5px 5px 5px #fff; 
    -box-shadow: 5px 5px 5px #fff; 
}
.TargetInfo{
	display: -webkit-flex;
	display: flex;
	visibility:hidden;
	width:100%;
	height:10%;
	top:90%;
	position: absolute;
	background-color:deepskyblue;
	opacity:0.8;
	align:middle;
	vertical-align:middle;
	
}
.TargetButton{
	margin-top:15px;
/* 	width:80px; */
	height:40px;
	z-index:4;
	border-radius: 8px;
	-webkit-appearance: none;
	border-style: solid;
	background-color:deepskyblue;;
	color:#fff;
/* 	margin-left:20px; */
	font-size:16px;
	border-color:#fff;
}
.BottomInfo{
	list-style:none; 
	display:inline;
	margin:0px;
	border:10px;
}
.TargetCloser{
	height:30px;
	width:30px;
	border-radius:15px;
	border-style: solid;
	background-color:#9b9b9b;;
	color:#fff;
	font-size:16px;
	-webkit-appearance: none;
/* 	float:right;	*/		
}
.MapInfoDiv{
	display: -webkit-flex;
	display: flex;
	top:5%;
	left:5%;
	width:90%;
	height:90%;
	background-color:#fff;
	position:absolute;
	visibility:hidden;
	z-index:10;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-style:  solid;
	border-color:#b1b1b1;
	-webkit-box-shadow: 2px 2px 2px #000; 
    -moz-box-shadow: 2px 2px 2px #000; 
    -box-shadow: 2px 2px 2px #000; 
    flex-direction: row;
   	flex-wrap: wrap;
}
.MapInfoCloser{
	height:30px;
	width:30px;
	border-radius:15px;
	border-style: none;
	background-color:#fff;;
	color:#b4b4b4;
	font-size:24px;
	-webkit-appearance: none;		
	margin:auto;
	margin-right:20px;	
}
.MapContent{
	display: -webkit-flex;
	display: flex;
	max-height:92%;
	margin:0 auto;	
	width:auto;	
}
.MapTitle{
	height:8%;
	width:100%;
	border-bottom: 2px #b4b4b4; 
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
/*    	flex-wrap: wrap-reverse ; */
   	justify-content: flex-end;
   	align-content:stretch;
   	border-bottom-style:  solid;
}
.MapImg{
	max-height:100%;
	margin:0 auto;	
	max-width:100%;	
	align:center;
	vertical-align:middle;
/* 	height:100%; */
}